<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/mi_project/css/base.css">
    <link rel="stylesheet" href="/mi_project/css/login.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2917027_rvml2v6pua.css">
    <script src="/mi_project/js/jquery.js"></script>
    <script src="/mi_project/layui/layui.js"></script>
    <script src="/mi_project/js/jquery.cookie.js"></script>
    <script src="/mi_project/js/common.js"></script>
</head>

<body>
    <div class="leftbanner">
        <div></div>
    </div>
    <div class="rightcontent">
        <header></header>
        <main>
            <header></header>
            <div class="loginBox">
                <main>
                    <div class="logintext">
                        <span>登录</span>
                    </div>
                    <form action="">
                        <div><input type="text" class="loginInput username" placeholder="手机"></div>
                        <div class="cleat-fix"><input type='password' class="loginInput password" placeholder="密码">
                            <div class="passwordShow"></div>
                        </div>
                        <div class="autoLogin">
                            <input type='checkbox'>七天免登陆
                        </div>
                        <div><input type="button" class="loginInput loginButton" value="登录"></div>
                    </form>
                </main>
            </div>
        </main>
    </div>
</body>

</html>
<script>
    //左banner图效果
    document.querySelector(".leftbanner div").style.height = window.innerHeight + "px";
    window.addEventListener("resize", function () {
        if (window.innerWidth < 1200 && window.innerWidth > 1000) {
            document.querySelector(".leftbanner").style.width = "200px"
        } else if (window.innerWidth < 1000) {
            document.querySelector(".leftbanner").style.width = "0px"
        } else {
            document.querySelector(".leftbanner").style.width = "375px"
        }
        document.querySelector(".leftbanner div").style.height = window.innerHeight + "px";
    });

    //右边
    $('.loginButton').click(function () {
        $.ajax({
            url: urls + "/user/login",
            data: { mobile: $('.username').val(), password: $(".password").val() },
            success: function (backData) {
                if (backData.code == 0) {
                    alert("登陆成功");
                    if ($('.autoLogin input').prop('checked')) {
                        $.cookie('user', backData.data, { expires: 7, path: '/' }
                        );
                    } else {
                        $.cookie('user', backData.data
                        );
                    }
                    //合并数据
                    let letCartLocalstorage = { "carts": [], "userId": $.cookie('user').id };
                    let cartDataT = JSON.parse(localStorage.getItem('userData'));
                    let i = 0;
                    for (let key in cartDataT) {
                        letCartLocalstorage["carts"][i] = { "goodsId": key * 1, "goodsCount": cartDataT[key] * 1 };
                        i++;
                    }
                    $.ajax({
                        url: urls + '/cart/addAll',
                        data: letCartLocalstorage,
                        success: function () {
                            cartDataT = {};
                            localStorage.setItem('userData', JSON.stringify(cartDataT));
                            if(getUrlParam('callback')) return location.href=decodeURIComponent(getUrlParam('callback'));
                            location.href = "index.html";
                        }
                    })
                    
                } else {
                    layer.alert(backData.msg)
                }
            }
        })
    })
</script>